<template>
	<view class="content" :style="{background: 'url('+ bgurl +'/policy/writeoff_bg.png) '}"> 
		<view class="login_con"> 
			<!-- #ifdef MP-WEIXIN -->
			<view class="wid" :style="{height: `${statusBarHeight}px`}"></view> 
			<view class="navbar"  :style="{height: `${titleBarHeight}px`}">
				<view class="left"  :style="{lineHeight: `${titleBarHeight}px` }" @click="goBack">
					<uv-icon name="arrow-left" color="#fff" size="20"></uv-icon> 
				</view> 
				<view class="title" :style="{lineHeight: `${titleBarHeight}px` }">团购券核销</view>
			</view>
			<!-- #endif -->  
			<view :style="{height: `180rpx`}"></view>  
			<view class="headline">
				<image src="../../static/picture/douyin.png" mode="widthFix"></image>
				<view>抖音团购自助验券</view>
			</view>
			<view class="write_con">
				<view class="write_inp fx-row-sb-c">
					<uv-input class="convert_code"  v-model="codes" @input="isInput"  border="surround" clearable type="text" fontSize="16px" placeholder="点击输入卡券兑换码" placeholder-style="font-size:32rpx;color:#BBBBBB"></uv-input>
					<!-- <input class="convert_code" type="number" placeholder="点击输入卡券兑换码" placeholder-style="font-size:32rpx;color:#BBBBBB"/> -->
					<view style="position: relative;z-index:99;width: 44rpx;height: 44rpx;padding: 20rpx;margin-right: 16rpx;"  @click="scanCode">
						<image src="../../static/picture/shaomiao.png" mode="widthFix"></image>
					</view>
				</view> 
				<view class="write_btn btn_bg" v-if="!codes">兑换</view>
				<view class="write_btn btn_act" v-else @click="exchange">兑换</view> 
				<view class="write_tip">
					<view class="fx-row-sta">
						<image style="width:36rpx;height: 36rpx;" src="../../static/picture/tip.png" mode="widthFix"></image>
						<view class="ft30" style="margin-left: 12rpx;color: #fff;">温馨提示</view>
					</view>
					<view class="tips"> 
						<view>1.请到抖音APP的团购订单详情页复制券码然后自助核销验券。</view>
						<view>2.团购券兑换之后不支持退款，请谨慎操作。</view>
						<view>3.券码兑换后会在平台生成商品券，商品券会自动发放到您的SPA钱包中，可以在平台预约下单时抵扣项目费用使用。</view>
					</view>
				</view>
			</view> 
		</view> 
		
	</view> 
</template>

<script>
	// #ifdef H5
	import jweixin from "@/utils/jweixin.js";
	// #endif
	import badgeMix from '@/common/mixins.js'
	import config from '@/config.js'  
	import { getScanCode,exchange } from '@/utils/api.js' 
	export default {
		mixins: [badgeMix],
		data() {
			return {
				titleBarHeight:this.titleBarHeight,
				statusBarHeight:this.statusBarHeight,
				allBarHeight:this.allBarHeight,  
				bgurl:config.imageUrl, 
				codes:'',
				codeType:0,//0手动输入券码    1识别加密券码
			}
		},
		onLoad() {
			// #ifdef H5
			this.$u.init()
			// #endif
		},
		methods: {
			isInput(){
				this.codeType = 0
			},
			scanCode(){  
				// alert("扫描")
				var _this = this 
				// #ifdef H5
				this.$u.init(() => {
					jweixin.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: (res) => { 
							const result = res.resultStr
							setTimeout(()=>{ 
								if(result.includes('douyin.com')){
									_this.getCode(result)
								}else{
									this.codes = ''
									uni.showToast({
										icon:'none',
										title:'请识别抖音平台团购券码！'
									}) 
								}
								
							},1000)   
						},
						error: err => {
							setTimeout(()=>{ 
								this.codes = ''
								uni.showToast({
									icon:'none',
									title:'识别失败！'
								}) 
							},1000)  
							
							console.log(err)
						}
					})
				}) 
				// #endif
				// #ifndef H5
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if(res.result.includes('douyin.com')){
							_this.getCode(res.result)
						}else{
							this.codes = ''
							uni.showToast({
								icon:'none',
								title:'请识别抖音平台团购券码！'
							}) 
						}
						// _this.getCode(res.result)
					},
					fail:function(err){
						this.codes = ''
						uni.showToast({
							icon:'none',
							title:'识别失败！'
						})
					}
				});
				// #endif 
				
			},
			getCode(url){
				getScanCode({"url":url}).then((res) => { 
					if(res.code == '200'){  
						this.codes = res.result.encryptedData
						this.codeType = 1
					}else{
						this.codes = ''
						uni.showToast({
							icon:'none',
							title:'识别失败，请手动填写！'
						})
					}
				})  
			},
			exchange(){
				if(this.codeType==0){
					var datas={"code":this.codes.replaceAll(" ","")}
				}
				if(this.codeType==1){
					var datas={"encryptedData":this.codes}
				}
				exchange(datas).then((res) => { 
					if(res.code == '200'){  
						this.codes = ''
						uni.showToast({
							icon:'success',
							title:'兑换成功'
						})
					}else if(res.code == '99'){
						this.codes = ''
						uni.showToast({
							icon:'none',
							title:res.message
						})
					}else{
						this.codes = ''
						uni.showToast({
							icon:'error',
							title:'兑换失败'
						})
					}
				})  
			},
			goBack(){ 
				uni.switchTab({
					url:'/pages/user/index'
				}) 
			}, 
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F4F6;
	}
	.content {
		width: 100vw;
		height: 100vh;
		// background: url('https://test.spadj.com/policy/logo_bg.png')  no-repeat center center fixed ; 
		background-size:  100% 100%!important;
		// background-position: fixed;
		box-sizing: border-box;  
		.login_bg{
			position: absolute;
			width: 100%; 
			height: 100%;
			top: 0;
			z-index: -1;
		}
		.login_con{
			width: 674rpx;
			margin: 0 auto; 
		}
		.other_login{
			position: fixed;
			bottom: 100rpx;
			width:600rpx ;
			margin: 0 75rpx;
			font-size: 28rpx;
			color: #fff; 
			.other_tit{
				margin-bottom: 36rpx;
			}
			.tel_icon{
				width:80rpx ;
				height: 80rpx;
				margin-bottom: 10rpx;
				background-color: #fff;
				border-radius: 50%;
				opacity: 0.6;
				text-align: center;
				line-height: 80rpx;
				image{
					width: 36rpx;
					height: 54rpx;
					margin: 13rpx 0;
				}
			}
		}
	}
	.navbar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		width: 690rpx;
		text-align: center;
		font-size: 40rpx;
		color: #fff;
		.left{ 
			position: relative;
			height: 40rpx; 
			margin: 32rpx 32rpx 32rpx 0; 
			font-size: 22rpx; 
			z-index: 1;
		}  
		.title{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			z-index: 0;
		}
	}
	 .headline{
		 display: flex;
		 justify-content: center;
		 align-items: flex-end;
		 margin-bottom: 98rpx;
		 font-size: 32rpx;
		 color: #fff;
		 font-weight: 600;
		 image{
			 width: 72rpx;
			 margin-right: 10rpx;
		 }
	 }
	 .uv-input{
		 border: none !important;
	 }
	 .write_con{
		 width: 670rpx;
		 margin: 0 auto; 
		 .write_inp{
			 width: 100%;
			 height: 112rpx;
			 margin-bottom: 28rpx;
			 background-color: #fff;
			 border-radius: 16rpx;
			 .convert_code{
				 width: 530rpx;
				 height: 112rpx;
				 padding: 0 26rpx !important;
				 border: none !important;
				 font-size: 32rpx;
			 }
			 image{
				 width: 44rpx;
				 height: 44rpx;  
			 }
		 }
		 .write_btn{
			 width: 100%;
			 height: 84rpx;
			 font-size: 32rpx;
			 color: #fff;
			 text-align: center;
			 line-height: 84rpx;
			 border-radius: 73rpx;
		 }
		 .btn_bg{
			 background: #C9C9C9;
		 }
		 .btn_act{
			 background: #AD8539;
		 }
		 .write_tip{
			 margin-top: 100rpx;
			 text-align: left;
		 } 
		 .tips{
			 margin-top: 16rpx;
			 line-height: 48rpx;
			 font-size: 26rpx;
			 color: #fff;
		 }
	 }
</style>
